<template>
    <div v-if="selectedArrListChild.length > 0">
        <div>
            <span style="color: green; font-size: 15px; margin-bottom: 5px">修改{{ $attrs.title }}编号汇总：</span>
            <span style="color: red" v-for="(item, index) in selectedArrListChild" :key="index"
                >{{ item[keyName] }} {{ index == selectedArrListChild.length - 1 ? '' : ',' }}</span
            >
        </div>
        <div class="edit-div" v-for="(item, index) in editDatas" :key="index">
            <div>
                <div style="font-size: 15px; margin-bottom: 2px">【{{ $attrs.title }}编号】</div>
                <div style="color: green; margin-left: 20px">{{ selectedArrListChild[index][keyName] }}</div>
            </div>
            <EntryItemCompare v-if="item['Role'] && item['Role'].length > 0" :title="$attrs.title + '基本信息'" :data="item['Role']" />
            <EntryItemCompare
                v-if="item.RoleMenuRelations && item.RoleMenuRelations.length > 0"
                :title="$attrs.title + '菜单权限调整'"
                :data="item.RoleMenuRelations"
            />
            <!-- 用户 -->
            <EntryItemCompare v-if="item['User'] && item['User'].length > 0" :title="$attrs.title + '基本信息'" :data="item['User']" />
            <EntryItemCompare
                v-if="item['AccessControl'] && item['AccessControl'].length > 0"
                :title="'编辑访问控制'"
                :data="item['AccessControl']"
            />
            <EntryItemCompare
                v-if="item['FundResource'] && item['FundResource'].length > 0"
                :title="'用户产品权限设置'"
                :data="item['FundResource']"
            />
            <br />
        </div>
        <hr style="margin: 10px 0; color: #e8e8e8" />
    </div>
</template>
<script lang="ts">
import EntryItemCompare from '@/pages/setting/components/item-setting/item-compare.vue';
import { Component, Vue, Watch, Prop } from 'vue-property-decorator';
import APIUser from '../api/auth-manage';
import APIRole from '../api/role-manage';
@Component({
    name: 'ComparionRecord',
    components: {
        EntryItemCompare,
    },
})
export default class ComparionRecord extends Vue {
    @Prop() checkedRows: any[];
    @Prop({
        default: () => {
            return 'roleCode';
        },
    })
    keyName: string;
    // selectedArrListChild与checkedRowKeys相同
    selectedArrListChild: any = []; // 勾选项差异内容
    editDatas: any[] = []; // 具体差异内容

    @Watch('checkedRows', { deep: true, immediate: true })
    handleChange() {
        this.selectedArrListChild = this.checkedRows;
        console.log(this.checkedRows, 'checkedRows');
        console.log(this.selectedArrListChild, 'selectedArrListChild');

        this.selectedArrListChild.length && this.getDiffCon();
    }

    /**
     * 获取比对差异数据
     */
    getDiffCon() {
        console.log('待办getDiffCon');
        let requestName;
        let requestParams;
        let isNeedUpdate: boolean = false; // 是否为修改事件  是调用修改详情接口，否则不调用
        console.log(this.keyName);
        this.editDatas = [];
        if (this.keyName == 'roleCode') {
            requestName = APIRole.compare;
            requestParams = this.checkedRows.map(ele => {
                // 为修改时候才显示差异内容
                if (['2', '4'].includes(ele.modifyAffair)) {
                    isNeedUpdate = true;
                }
                return { roleCode: ele.roleCode, serialNo: ele.serialNo };
            });
        } else {
            requestName = APIUser.compare;

            requestParams = this.checkedRows.map(ele => {
                //  不为新增和删除时候才显示差异内容
                if (!['1', '3'].includes(ele.modifyAffair)) {
                    isNeedUpdate = true;
                }
                return { userCode: ele.userCode, serialNo: ele.serialNo };
            });
        }

        if (isNeedUpdate) {
            // 只有在修改的状态下会
            requestName(requestParams)
                .then((res: any) => {
                    this.editDatas = res;
                })
                .catch(() => {});
        }
    }
}
</script>
<style lang="scss" scoped></style>
